import React, { useState } from 'react';
import './One_Stop.css';

const One_Stop: React.FC = () => {
  const [hoverIndex, setHoverIndex] = useState(-1);

  const handleMouseEnter = (index: number) => {
    if (hoverIndex !== index) {
      setHoverIndex(index);
    }
  };

  const modules = [
    { title: '创意供给', content: '创意无法及时满足', content1: '高频个性化需求?' },
    { title: '内容生产', content: '如何用设计工具提', content1: '升内容生产效率?' },
    { title: '资产管理', content: '内容资产如何协同', content1: '管理、高效复用?' },
    { title: '营销应用', content: '营销内容如何多平', content1: '台高效应用?' },
    { title: '效果监测', content: '如何借助数据', content1: '反哺内容优化?' },
    { title: '系统定制', content: '通过私有化部署,满足企业更多个性化需求,与企业业务流程紧密结合' },
  ];

  return (
    <div className='One_Stop'>
      <div className='title'>
        <h1>一站式服务</h1>
        <h1>搭建企业视觉内容新基建</h1>
      </div>

      <div className='One_Stop_botton'>
        {modules.map((module, index) => (
          <div
            key={index}
            className={`One_Stop_first ${hoverIndex === index ? 'hover' : ''}`}
            onMouseEnter={() => handleMouseEnter(index)}
          >
            {hoverIndex !== index ? (
              <>
                <h3>{index + 1}</h3>
                <p>{module.title}</p>
                <b className='b'>{module.content}</b>
                <b className='b'>{module.content1}</b>
              </>
            ) : (
              <div className="One_Stop_six">
                <b style={{ marginTop: "20px", display: "inline-block" }}>系统定制:打造企业专属内容中台</b>
                <p className='p'>{module.content}</p>
                <div style={{ display: "flex" }}>
                  {[...Array(4)].map((_, i) => (
                    <div className='four_first' key={i}>
                      <img src="https://cdn.dancf.com/fe-assets/20231121/assets/3e4713e87ad4120513e3b4df30331bfc.png" alt="" /><br />
                      <b>企业系统集成</b>
                      <p>内容应用流转更便捷</p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default One_Stop;